/**
 * 科创概览 - 企业详情 - 企业列表
 */
import { defineComponent, onMounted, ref } from 'vue';
import { CompanyListAPI } from '@/service/api/QualificationDetailAPI';
import './style.scss';

export default defineComponent({
  name: 'QualificationCompanyList',
  props: {
    title: String,
    qualificationType: String,
  },
  setup: (props) => {
    const companyRes: any = ref({});

    /**
     * 获取公司数据
     * e.g. {data:[],total:100}
     * @param start 开始页数
     */
    const getData = async (start) => {
      companyRes.value = await CompanyListAPI(
        {
          filter: {
            region: {
              province: '江苏省', //省份
              city: '苏州市', //市
              district: null, //区
            },
            qualifications: props.qualificationType === '科创企业' ? [] : [props.qualificationType], // <科创企业> 这个属性不传，或者值为null 或者数组为[]空
          },
          fields: ['company_name', 'company_id'], //只要结果中的company_name和company_id字段，可以写更多的字段
          start, //分页，开始页
          rows: 48, //分页，每页显示多少数据
        },
        props.qualificationType
      );
    };

    onMounted(() => {
      getData(1);
    });

    return { getData, companyRes };
  },
  render(props) {
    let activeFlag = false;
    return (
      <div id="QualificationCompanyList">
        <header>{props.title}</header>
        <ul>
          {this.companyRes?.data?.map((c, index) => {
            if (!(index % 3)) {
              activeFlag = !activeFlag;
            }
            return <li class={activeFlag ? 'active' : ''}>{c.company_name} </li>;
          })}
        </ul>

        {/* 超过一屏幕 显示翻页 */}
        {this.companyRes.total > 48 && (
          <footer>
            <el-pagination
              layout="prev, pager, next"
              total={this.companyRes.total}
              page-size={48}
              onCurrentChange={this.getData}
            ></el-pagination>
          </footer>
        )}
      </div>
    );
  },
});
